<template>
  <div class="hotguan">
    <!-- 会员管理 -->
    <div style="margin-top: 20px;margin-bottom: 20px; padding-left: 40px;">
    <el-button type="success" @click="">解除禁用</el-button>
    <el-button  type="danger" @click="">禁用用户</el-button>
  </div>
  <el-divider />
    <!-- 分类界面 -->
  <el-table
    ref="multipleTableRef"
    :data="state.tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="80" />
    <el-table-column label="账号" width="220">
      <template #default="scope">{{ scope.row.account }}</template>
    </el-table-column>
    <el-table-column property="name" label="登录名" width="320" />
    <el-table-column property="state" label="身份状态" width="320" />
    <el-table-column property="logout" label="是否注销" width="320" />
    <el-table-column property="time"  label="注销时间" width="440" show-overflow-tooltip >  
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <div class="Pagination">
    <el-pagination background layout="prev, pager, next" :total="15" />
  </div>
  </div>
</template>

<script setup>
import axios from 'axios' 
import { ref,reactive,onMounted } from 'vue'
const form = reactive({
  type: [],
  tableData:[]
})
/* 内容定义 */
const state = reactive({
  tableData: [], // 数据列表
})
onMounted(() => {
  getCategory()
})
const getCategory= () => {
  axios.get('http://rap2api.taobao.org/app/mock/308829//api/manage')      
.then((res) => {
console.log(res)
state.tableData = res.data.manage
//  console.log(tableData)
})
}

</script>

<style lang="less" scoped>
.Pagination{
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
</style>
